import React, { useState } from 'react'
import logo from './images/图片1.png'
import logo2 from './images/图片2.png'
import './style.css'
import axios from 'axios'
import { useEffect } from 'react'
const App = () => {
  const [list, setList] = useState([])
  const allPrice = list.reduce((p, n) => {
    // P 是初始值0
    // n 是一项
    return p + n.price * n.count
  }, 0)
  const getList = async () => {
    const resp = await axios.get('/api/list')
    console.log(resp.data)
    // 存储 数据
    setList(resp.data)
  }
  // 清空购物车
  const clearCart = () => {
    setList([])
  }
  // 数量+ 
  const add = id => {
    const item = list.find(v => v.id === id)
    if(item.count >= 10) {
      alert('购物车库存不足，非常遗憾')
      return 
    }
    item.count++
    setList([...list])
  }

  useEffect(() => {
    getList()
  }, [])
  // if(list.length === 0) {
  //   return (
  //     <img src={logo2}></img>
  //   )
  // }

  return (
    <div>
      <div className="middle">
        <div className="header">
          <img src={logo} alt="" />
          <div className='right'>
            <input type="text" />
            <button>搜索</button>
          </div>
        </div>
        <div>
        </div>
        {
          list.length ? <table>
            <thead>
              <tr>
                <th>
                  选中
                </th>
                <th>
                  商品
                </th>
                <th>
                  单价
                </th>
                <th>
                  数量
                </th>
                <th>
                  小计
                </th>
                <th>
                  操作
                </th>
              </tr>
            </thead>
            <tbody>
              {
                list.map(v => {
                  return <tr key={v.id}>
                    <td>
                      <input type="checkbox" checked={v.check} />
                    </td>
                    <td>
                      <dl>
                        <dt>
                          <img src={v.image} alt="" />
                        </dt>
                        <dd>
                          <h3>{v.title}</h3>
                          <p>{v.desc}</p>
                        </dd>
                      </dl>
                    </td>
                    <td>
                      ￥：{v.price}
                    </td>
                    <td>
                      <button className='btn'>-</button>
                      <span>{v.count}</span>
                      <button className='btn' onClick={() => add(v.id)}>+</button>
                    </td>
                    <td>
                      {v.price * v.count}
                    </td>
                    <td>
                      <span>删除</span>
                    </td>
                  </tr>

                })
              }

            </tbody>
          </table> :
            <img src={logo2} alt="" width="100%" />
        }
        <div className="foot">
          <div>
            全选 <input type="checkbox" />
            <span> 删除选中的商品 </span>
            <span onClick={clearCart}>清理购物车</span>
          </div>
          <div>
            选中 <span>2</span>个商品
            总价：<span>{allPrice.toFixed(2)}</span>元
            <button>去结算</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App